<template>
	<view v-if="list.length">
		<view
			v-for="(item, index) in list"
			v-show="item?.width > 0"
			:style="{
				position: 'absolute',
				left: item.x * item.realScale + 'px',
				top: item.y * item.realScale + 'px',
			}">
			<up-image
				:style="
					'filter: brightness(360%) sepia(100) saturate(100) hue-rotate(' +
					index * 40 +
					'deg) drop-shadow(2px 2px);opacity:0.4;width:' +
					item.width +
					'px;height:' +
					item.height +
					'px'
				"
				:src="item.url"
				mode="scaleToFill"
				:height="item.height"
				:width="item.width"></up-image>
		</view>
	</view>
</template>

<script setup lang="ts">
import { watch } from "vue";
const props = defineProps<{
	list: ZoneDisplay;
}>();
watch(
	() => props.list,
	(val, oldVal) => {},
	{ immediate: true, deep: true }
);
</script>

<style lang="scss" scoped></style>
